<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <link rel="stylesheet" href="css/shop.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="js/vue.js"></script>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/worryGlobal.js"></script>
    <script src="js/detail.js"></script>
    <script src="js/shop.js"></script>
</head>
<body>
    <div class="site-nav" id="myDiv">
        <div class="site-nav-bd">
            <ul>
                <li><a id="me">我的</a></li>
                <li><img src="image/foreground/gouwuche.png">
                    <a href="shoppingCart.html" style="position: relative">购物车
                        <span id="total" style="display: none;position: absolute;background-color: red;padding:3px;color: #fff;width: 10px;height: 12px;text-align: center;border-radius: 13px;left: -30px;top: 0;font-size: 0">
                                    <span style="position: absolute;left: 6px;top: -8px;font-size: 8px;font-weight: bold">0</span>
                                </span>
                    </a></li>
                <li><img src="image/foreground/shoucangjia.png"><a href="favorite.html">收藏夹</a></li>
                <li>联系客服</li>
                <li> <a id="user"> 登录/注册</a></li>
            </ul>
        </div>
    </div>
    <!--logo+搜索-->
    <div class="top-box">
        <div class="logo">
            <a href="YouWuMain.html" id="logo">
                <p>尤物</p>
                <p class="small">youwu</p>
            </a>
        </div>
    </div>
    <div class="wrap">
        <div class="product-intro" id="goodInfo">
            <div class="preview-wrap">
                <div class="s_box">
                    <img src="image/foreground/手办广告.png" alt="" class="img">
                    <span></span>
                </div>
                <div class="b_box">
                    <img src="image/foreground/手办广告.png" alt="" class="img">
                </div>
                <div class="spec-list">
                    <a href="javascript:;" class="prev"></a>
                    <a href="javascript:;" class="next"></a>
<!--                    <div class="spec-items">-->
<!--                        <ul>-->
<!--                            <li class="img-hover"><img src="image/foreground/海贼王.jpg" alt=""></li>-->
<!--                            <li><img src="image/foreground/1.jpg" alt=""></li>-->
<!--                            <li><img src="image/foreground/海贼王.jpg" alt=""></li>-->
<!--                            <li><img src="image/foreground/2.jpg" alt=""></li>-->
<!--                            <li><img src="image/foreground/海贼王.jpg" alt=""></li>-->
<!--                            <li><img src="image/foreground/海贼王.jpg" alt=""></li>-->
<!--                            <li><img src="image/foreground/6.jpg" alt=""></li>-->
<!--                        </ul>-->
<!--                    </div>-->
                </div>
            </div>
            <div class="itemInfo-wrap">
                <div class="biaoti">
                    <a href="#"><b></b></a>
                </div>
                <div class="jiage">
                    <div class="mum" style="padding-top: 12px"><h3></h3></div>
                    <div class="price">
                        <table height="130px" width="590px" >
                            <tr>
                                <td class="one">尤物价：</td>
                                <td  class="two">￥<span class="price"></span> </td>
                                <td colspan="2" class="three">降价通知</td>
                            </tr>
                            <tr>
                                <td class="one">折扣</td>
                                <td class="two" style="font-size: 15px"><div class="qvan" style="display: inline-block;font-size: 15px"></div>折</td>
                            </tr>
<!--                            <tr>-->
<!--                                <td class="one">促销</td>-->
<!--                                <td><div class="qvan">跨店满减</div></td>-->
<!--                                <td colspan="4" class="four">每满300元，可减30元现金，最多可减40000元！</td>-->
<!--                            </tr>-->
                        </table>
                    </div>
                    <div class="dizhi">
                        <table  width="560px" height="130px">
                            <tr >
                                <td class="one">配送至</td>
                                <td><select name="address" required id="address">
                                    <option value="北京东城区">北京东城区北新桥街道</option>
                                    <option value="广西柳州市">广西柳州市柳北区</option>
                                </select>
                                </td>
                                <td class="one">有货 </td>
                                <td class="one">免运费</td>
                            </tr>
<!--                            <tr>-->
<!--                                <td></td>-->
<!--                                <td colspan="4" class="three"><b>由意柔玩具专卖店发货，并提供售后服务</b></td>-->

<!--                            </tr>-->
                            <tr>
                                <td class="one">服务支持</td>
                                <td><img src="image/foreground/放心购.jpg"></td>
                                <td class="two"><span>免费上门取货|</span>
                                    <span>极速审核</span>
                                </td>
                            </tr>
                        </table>
                        <hr>
                    </div>
<!--                    <div class="shangping">-->
<!--                        <a>选择型号</a>-->
<!--                        <div class="one-box" ><img src="image/foreground/1.jpg">火拳路飞(长约15cm)</div>-->
<!--                        <div class="one-box"><img src="image/foreground/2.jpg">火拳路飞(长约15cm)</div>-->
<!--                        <div class="one-box"><img src="image/foreground/3.jpg">火拳路飞(长约15cm)</div>-->
<!--                        <div class="one-box"><img src="image/foreground/4.jpg">火拳路飞(长约15cm)</div>-->
<!--                        <div class="one-box"><img src="image/foreground/5.jpg">火拳路飞(长约15cm)</div>-->
<!--                        <div class="one-box"><img src="image/foreground/6.jpg">火拳路飞(长约15cm)</div>-->
<!--                        <div class="one-box"><img src="image/foreground/7.jpg">火拳路飞(长约15cm)</div>-->
<!--                        <div class="one-box"><img src="image/foreground/4.jpg">火拳路飞(长约15cm)</div>-->
<!--                        <div class="one-box"><img src="image/foreground/1.jpg">火拳路飞(长约15cm)</div>-->
<!--                        <div class="one-box"><img src="image/foreground/2.jpg">火拳路飞(长约15cm)</div>-->
<!--                        <div class="one-box"><img src="image/foreground/3.jpg">火拳路飞(长约15cm)</div>-->
<!--                        <div class="one-box"><img src="image/foreground/4.jpg">火拳路飞(长约15cm)</div>-->
<!--                        <div class="one-box"><img src="image/foreground/5.jpg">火拳路飞(长约15cm)</div>-->
<!--                    </div>-->
                    <div  id="ljgm"><input type="button" value="领劵购买"></div>
                    <div id="jrgwc"><input type="button" value="加入购物车"></div>
                    <div id="sc"><img src="./image/foreground/星星.png"><input type="button" value="   收藏"></div>
                </div>
            </div>
            <div class="track" id="like">
                <a><b>看了又看</b></a>
                <div v-for="(good,index) in goods" :key="index">
                    <a v-on:click="goodDetail(good.commodityId)">
                        <img :src=('http://project-x.cn:9000/youwushoppingmall/product/'+good.pictureUrl) alt="" >
                        <a class="one"><b>￥{{ good.commodityPrices }}</b></a>
                    </a>
                </div>
            </div>
        </div>
        <div id="comment">
            <ul>
                <li><h2>用户评论</h2></li>
                <li id="li"><a>全部</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a>有图/视频</a></li>
                <li><img src="./image/foreground/3.jpg" id="img"/> <a id="zhangh">xxxxxxxxx</a></li>
                <li><a id="pinjia">包装很好，配件齐全 机箱挺好看的哈哈，风扇声音几乎零很安静 性能很ok，我玩AI的，
                    sd跑1024 batch4非常快，生产力上来了,电脑性能：电脑性能快的1b 显卡效果：显卡效果好的1b 外观材质：
                    外观炫酷的1b 怎么说呢，第一次在网上购买电脑还是有一些担心，所以我提出的问题买家都能够及时且耐心的回复，
                    电脑收到了之后使用起来很流畅，没有任何问题！希望以后继续合作，大家可以放心购买！</a></li>
                <li id="img2"><img src="./image/foreground/6.jpg" alt=""><img src="./image/foreground/6.jpg" alt=""><img src="./image/foreground/6.jpg" alt=""></li>
            </ul>
            <div id="xian1"></div>
            <div id="zhuipin">
                <a style="color: gold;">0天后追评：</a><a>跑Stable Diffusion真的很爽哈哈哈</a>
            </div>
            <div id="xian2"></div>
        </div>
    </div>
    <script>
        // OOP:编程
        function Magnifier(){
            // 1.选元素
            this.sBox = document.querySelector(".s_box");
            this.span = document.querySelector(".s_box span");
            this.bBox = document.querySelector(".b_box");
            this.bImg = document.querySelector(".b_box img");
            // 2.绑定事件
            this.init()
        }
        Magnifier.prototype.init = function(){
            var that = this;
            // 进入
            this.sBox.onmouseover = function(){
                // 3-1.显示，计算span的宽高
                that.show()
            }
            // 离开
            this.sBox.onmouseout = function(){
                // 3-2.隐藏
                that.hide()
            }
            // 移动
            this.sBox.onmousemove = function(eve){
                var e = eve || window.event;
                // 5.span跟随鼠标
                that.move(e)
            }
        }
        Magnifier.prototype.show = function(){
            // 显示，计算span的宽高
            this.span.style.display = "block";
            this.bBox.style.display = "block";


            this.span.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
            this.span.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight * 0.8 + "px";
        }
        Magnifier.prototype.hide = function(){
            // 隐藏
            this.span.style.display = "none";
            this.bBox.style.display = "none";
        }
        Magnifier.prototype.move = function(e){
            // 计算移动的距离
            var l = e.clientX - this.sBox.offsetLeft - (this.span.offsetWidth*2);
            var t = e.clientY - this.sBox.offsetTop - (this.span.offsetHeight*1.5);

            //  边界限定
            if(l<0) l=0;
            if(t<0) t=0;
            if(l>this.sBox.offsetWidth - this.span.offsetWidth){
                l=this.sBox.offsetWidth - this.span.offsetWidth
            }
            if(t>this.sBox.offsetHeight - this.span.offsetHeight){
                t=this.sBox.offsetHeight - this.span.offsetHeight
            }
            //  span跟随鼠标
            this.span.style.left = l + "px";
            this.span.style.top = t + "px";

            //  计算比例
            // 当前值 / 总值，得到的就是比例
            var x = l / (this.sBox.offsetWidth - this.span.offsetWidth);
            var y = t / (this.sBox.offsetHeight - this.span.offsetHeight);


            //  根据比例计算右边大图应该移动的距离
            // 比例 * 总值，得到的就是当前应该移动的距离
            this.bImg.style.left = x * (this.bBox.offsetWidth - this.bImg.offsetWidth) + "px";
            this.bImg.style.top = y * (this.bBox.offsetHeight - this.bImg.offsetHeight) + "px";
        }

        new Magnifier();
    </script>
</body>
</html>